<template>
  <div class="eventcenter">
    <h3>this is test page</h3>
    <!-- :options="swiperOptions" , 把options写在第一行代码里面也没有错,
      使用这个这个的方法要在vue中初始化, 应该是如此 首先在 data中定义 变量myswiper: null
      mounted钩子中, 进行初始化 在 代码中 initSwiper() 这个方法可以看到  只不过 @click="" 的事件函数要如此 this.mySwiper.slidePrev()
      this.$refs.mySwiper  这个只能拿到个 dom 对象, 并不能这样操作到swiper,  还是对初始化好的swiper对象操作可行-->
    <div class="swiper-container" ref="mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <h3>{{ $emit }}</h3>
        </div>
        <div class="swiper-slide">
          <h3>{{ $emit }}</h3>
        </div>
        <div class="swiper-slide">
          <h3>{{ $emit }}</h3>
        </div>
      </div>
      <div class="swiper-button-prev" @click="prev"></div>
      <div class="swiper-button-next" @click="next"></div>
    </div>
    <hr />
    <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
      <el-radio-button :label="false">展开</el-radio-button>
      <el-radio-button :label="true">收起</el-radio-button>
    </el-radio-group>
    <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span slot="title">导航一</span>
        </template>
        <el-menu-item-group>
          <span slot="title">分组一</span>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2"><el-menu-item index="1-3">选项3</el-menu-item></el-menu-item-group>
        <el-submenu index="1-4">
          <span slot="title">选项4</span>
          <el-menu-item index="1-4-1">选项1</el-menu-item>
          <el-menu-item index="1-4-4">选项b</el-menu-item>
        </el-submenu>
        <el-submenu index="1-5">
          <span slot="title">选项5</span>
          <el-menu-item index="1-4-1">选项2</el-menu-item>
          <el-menu-item index="1-5-1">选项b</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">导航二</span>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <i class="el-icon-document"></i>
        <span slot="title">导航三</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title">导航四</span>
      </el-menu-item>
    </el-menu>
  </div>
  <!--  这个是 vue-awsome-swiper的使用 main.js中写入 import 'font-awesome/css/font-awesome.css' Vue.use(VueAwesomeSwiper)
       ref="mySwiper"  就可以直接拿到组件 this.$refs.mySwiper 可以打印看看 是个vue components 里边有个$swiper
      这个里中的__proto 具体忘了, 有 slidePrev 这俩方法 不同于上边 这个应该是要写 :options="swiperOptions" 就是配置swiper的相关参数 -->
  <!-- <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide>slide1</swiper-slide>
      <swiper-slide>slide2</swiper-slide>
      <swiper-slide>slide3</swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
      <div @click="prev" class="swiper-button-prev" slot="button-prev"></div>
      <div @click="next" class="swiper-button-next" slot="button-next"></div>
      </swiper> -->
</template>

<script>
import Swiper from 'swiper'

import 'swiper/swiper-bundle.css'

// var mySwiper = new Swiper('.swiper-container');

export default {
  // 组件名称
  name: 'SwiperDemo',
  // 局部注册的组件
  components: {
    // mySwiper
  },
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      isCollapse: true,
      mySwiper: null,
      swiperOptions: {
        loop: true,
        slidesPerView: 1,
        spaceBetween: 1,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }
    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {},
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {
    this.initSwiper()
  },
  // 组件方法
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    },
    initSwiper() {
      this.mySwiper = new Swiper('.swiper-container', {
        direction: 'horizontal', //  vertical 垂直切换选项   水平 horizontal
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination'
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      })
    },

    prev() {
      // 分割线 ----- 1
      // console.log(this.$refs.mySwiper)
      // console.log(this.mySwiper) // false
      // console.log(this.mySwiper.slidePrev()); // false
      this.mySwiper.slidePrev()
      // 分割线 ----- 2
      // this.$refs.mySwiper.$swiper.slidePrev();
    },
    next() {
      // 分割线 ----- 1
      this.mySwiper.slideNext()
      // 分割线 ----- 2
      // this.$refs.mySwiper.$swiper.slideNext();
    }
  }
}
</script>

<style scoped lang="less">
.swiper-slide {
  background-color: #ffa;
  height: 150px;
  width: 100%;
}
</style>
